<template>
  <div class="container">
    <div class="title">
      <span>音乐人实名认证</span>
      <span @click="onRecord">申请记录></span>
    </div>
    <el-form
      ref="userFormRef"
      :model="userForm"
      :rules="rules"
      label-width="120px"
      status-icon
    >
      <el-form-item label="艺人姓名" prop="name">
        <el-input v-model="userForm.name" />
      </el-form-item>
      <el-form-item label="个人照片" prop="image">
        <el-upload
          :action="baseUrl + '/api/file/upload'"
          :show-file-list="false"
          :on-success="handleImage"
        >
          <img
            style="width: 178px; height: 178px"
            v-if="userForm.image"
            :src="baseUrl + userForm.image"
            class="avatar"
          />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="身份证照片" prop="idCard">
        <el-upload
          style="margin-right: 20px"
          :action="baseUrl + '/api/file/upload'"
          :show-file-list="false"
          :on-success="handleFront"
        >
          <img
            style="width: 200px; height: 150px"
            v-if="userForm.idCard[0]"
            :src="baseUrl + userForm.idCard[0]"
            class="avatar"
          />
          <span class="id_card" v-else>正面</span>
        </el-upload>
        <el-upload
          :action="baseUrl + '/api/file/upload'"
          :show-file-list="false"
          :on-success="handleOpposite"
        >
          <img
            style="width: 200px; height: 150px"
            v-if="userForm.idCard[1]"
            :src="baseUrl + userForm.idCard[1]"
            class="avatar"
          />
          <span class="id_card" v-else>反面</span>
        </el-upload>
      </el-form-item>
      <el-form-item label="其他">
        <el-input type="textarea" v-model="userForm.other" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit(userFormRef)">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { applyAdd } from "@/http/api";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
const baseUrl = import.meta.env.VITE_API_URL;
const router = useRouter();
const userFormRef = ref();
const userForm = ref({
  name: "",
  image: "",
  id_card: "",
  other: "",
  idCard: ["", ""],
});

const validateIdCard = (rule, value, callback) => {
  if (userForm.value.idCard[0] == "") {
    callback(new Error("请上传身份证正面"));
  } else if (userForm.value.idCard[1] == "") {
    callback(new Error("请上传身份证反面"));
  }
  callback();
};

const rules = ref({
  name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
  image: [{ required: true, message: "请上传艺人照片", trigger: "blur" }],
  idCard: [{ required: true, validator: validateIdCard, trigger: "blur" }],
});

const onRecord = () => {
  router.push({
    path: "/user_record",
  });
};

const handleImage = (e) => {
  userForm.value.image = e.url[0];
};

const handleFront = (e) => {
  userForm.value.idCard[0] = e.url[0];
};

const handleOpposite = (e) => {
  userForm.value.idCard[1] = e.url[0];
};

const submit = async (formEl) => {
  if (!formEl) return;
  await formEl.validate(async (valid) => {
    if (valid) {
      userForm.value.id_card =
        userForm.value.idCard[0] + "," + userForm.value.idCard[1];
      const { code, data, msg } = await applyAdd({
        name: userForm.value.name,
        image: userForm.value.image,
        id_card: userForm.value.id_card,
        other: userForm.value.other,
      });
      if (code == 200) {
        ElMessage.success("申请成功");
        return;
      }
      ElMessage.error(msg);
    }
  });
};
</script>

<style lang="scss" scoped>
@import "index.scss";
</style>
